<template>
  <van-popup
    v-model="open"
    round
    closeable
    :close-on-click-overlay="false"
    position="bottom"
    :style="{ height: '80%' }"
  >
    <div class="cityUser">申请城市盟主</div>
    <van-form @submit="onSubmit" autocomplete="off">
      <van-field
        v-model="formData.name"
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        input-align="right"
        maxlength="40"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        v-model="formData.mobile"
        name="mobile"
        label="手机"
        type="tel"
        placeholder="请输入手机"
        input-align="right"
        maxlength="40"
        :rules="[{ required: true, message: '请输入手机' }]"
      />
      <van-field
        v-model="formData.area"
        is-link
        readonly
        name="mobile"
        @click="$refs.area.show = true"
        label="所在地区"
        placeholder="请输选择所在地区"
        input-align="right"
        :rules="[{ required: true, message: '请输选择所在地区' }]"
      />
      <van-button plain>申请</van-button>
    </van-form>
    <v-area ref="area" @area-event="areaEvent"></v-area>
  </van-popup>
</template>
<script>
import { Form, Field, Icon, Popup, Button, Toast } from "vant";
import { AddCityUser } from "@/api/cityLeader";
export default {
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    vArea: (resolve) => require(["./area"], resolve),
  },
  data() {
    return {
      open: false,
      formData: {
        provinces: "",
        cities: "",
        name: "",
        mobile: "",

        area: "",
      },
    };
  },
  methods: {
    areaEvent(list) {
      const provinces = list[0].name;
      const cities = list[1].name;
      this.formData.area = provinces + "/" + cities;
      this.formData.provinces = provinces;
      this.formData.cities = cities;
    },
    onSubmit() {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "提交中...",
      });
      AddCityUser(this.formData).then((res) => {
        if (res.data.resultStatus) {
          Toast.success(res.data.errorMessage);
          this.open = false;
          this.$emit("load");
        } else {
          Toast.fail(res.data.errorMessage);
        }
        const timer = setInterval(() => {
          clearInterval(timer);
          Toast.clear();
        }, 1000);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.cityUser {
  padding: 17px 0;
  font-size: 18px;
  text-align: center;
  line-height: 22px;
  text-align: center;
  color: #333333;
  font-weight: bold;
}
.van-form {
  padding: 0 17px;
  .name {
    padding: 13px 0;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .van-field {
    margin-bottom: 18px;
    padding: 13px 0;
    height: 20px;
    line-height: 20px;
    box-sizing: content-box;
    /deep/ .van-field__error-message {
      display: none;
    }
    /deep/.van-cell__right-icon {
      line-height: 20px;
      height: 20px;
    }
    &:after {
      left: 0;
      right: 0;
    }
  }
  .van-button {
    display: block;
    margin: 90px auto 0 auto;
    width: 125px;
    height: 46px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background: #333333;
    border-radius: 23px;
  }
}
</style>